<template>
  <div class="student-layout">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-container">
        <!-- 左侧品牌标识 -->
        <div class="brand">
          <span class="brand-text">校园管理系统</span>
        </div>

           
        <!-- 天气查询入口 -->
        <div class="weather-entrance">
          <el-button 
            type="text" 
            class="weather-button" 
            @click="navigateToWeather"
          >
            <el-icon><Sunny /></el-icon> 天气预报
          </el-button>
        </div>

        <!-- 右侧导航与用户信息 -->
        <div class="header-right">
          <!-- 导航链接 -->
          <!-- <el-menu
            :default-active="activePath"
            mode="horizontal"
            class="header-menu"
          >
            <el-menu-item index="/student/dashboard">首页</el-menu-item>
            <el-menu-item index="/student/courses">课程管理</el-menu-item>
            <el-menu-item index="/student/activities">活动中心</el-menu-item>
          </el-menu> -->

          <!-- 用户信息 -->
          <div class="user-info">
            <el-avatar size="small" src="https://picsum.photos/64/64" />
            <span class="user-name">{{ userInfo.name }}</span>
            <el-dropdown @command="handleLogout">
              <span class="el-dropdown-link">
                退出 <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </el-header>

    <!-- 主体内容区 -->
    <div class="main-container">
      <!-- 侧边栏 -->
      <el-aside class="sidebar" v-show="!isMobile">
        <el-menu
          :default-active="activePath"
          mode="vertical"
          :collapse="isCollapse"
          @select="handleMenuSelect"
        >

         <el-menu-item index="/student/dashboard">首页</el-menu-item>
          <el-submenu index="course">
            <template #title>
   
              <span>课程相关</span>
            </template>
            <el-menu-item index="/classLeader/uploadTimetable">课程表</el-menu-item>
            <el-menu-item index="/classLeader/evaluation">工作评价</el-menu-item>
          </el-submenu>

          <el-submenu index="dorm">
            <template #title>
              <span>宿舍管理</span>
            </template>
            <el-menu-item index="/student/repair">宿舍报修</el-menu-item>
            <el-menu-item index="/classLeader/notice">班级通知</el-menu-item>
          </el-submenu>

          <el-menu-item index="/student/garbage">
            <span>查看附近垃圾点</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容 -->
      <el-main class="main-content">
        <div class="content-container">
          <router-view />
        </div>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {  ElMessageBox } from 'element-plus';
import { useUserStore } from '@/store/user';

// 响应式数据
const route = useRoute();
const router = useRouter();
const isMobile = ref(window.innerWidth < 1024);
const isCollapse = ref(false);
const  userStore = useUserStore();
const userInfo = ref({ name: userStore.userInfo.name, studentId: '20230101' });


// 当前激活路径
const activePath = computed(() => route.path);

// 菜单选择处理
const handleMenuSelect = (key) => {
  if (key) router.push(key);
};

const navigateToWeather = () => {
  router.push('/classLeader/weather');
};



// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      // 执行退出逻辑（如清除 token、跳转登录页）
      router.push('/login');
    })
    .catch(() => {});
};

// 响应式调整
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth < 1024;
});
</script>

<style scoped>
.student-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 0 20px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.brand-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-menu {
  font-size: 0.95rem;
  color: #34495e;
}

.el-menu--horizontal > .el-menu-item {
  margin: 0 15px;
  transition: color 0.3s;
}

.el-menu--horizontal > .el-menu-item:hover {
  color: #2196f3;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
}

.user-name {
  font-size: 0.95rem;
  color: #34495e;
}

.main-container {
  display: flex;
  flex: 1;
}

.sidebar {
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  transition: width 0.3s;
}

.el-menu--vertical {
  width: 200px;
  border-right: none;
}

.el-menu-item {
  padding: 12px 20px !important;
}

.el-submenu__title {
  padding: 12px 20px !important;
}

.main-content {
  flex: 1;
  padding: 20px;
  background: #f0f2f5;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 20px;
}


.weather-entrance {
  margin-right: auto;
  display: flex;
  align-items: center;
}

.weather-button {
  color: #34495e;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.weather-button:hover {
  color: #2196f3;
}

.el-icon {
  margin-right: 5px;
}

</style>